import { socialUserTagModel } from '@/models/socialUserTag'
import TagDrawl from '@/pages/TagManage/components/TagDrawl'
import TagUpdateModal from '@/pages/TagManage/components/TagUpdateModal'
import { PageContainer } from '@ant-design/pro-components'
import { Button, Card, Divider, Tag } from 'antd'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'
import styled from 'styled-components'

const ActionBar = styled.div`
  margin-bottom: 10px;
`
const TagListContainer = styled.div``
const TagGroupNav = styled.div`
  font-size: 24px;
  margin-bottom: 10px;
`
const TagGroup = styled.div`
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
`
export const CustomTag = styled(Tag)<{ tagTextColor: string }>`
  color: ${(props) => props.tagTextColor} !important;
  cursor: pointer;
  line-height: 30px;
  padding: 0 20px;
  position: relative;
`
const TagManage = () => {
  useEffect(() => {
    socialUserTagModel.getSocialUserTagListAsync().then()
  }, [])

  return (
    <PageContainer>
      <ActionBar>
        <Button type="primary" ghost onClick={socialUserTagModel.createTag}>
          创建标签
        </Button>
      </ActionBar>
      <Card>
        <TagListContainer>
          {socialUserTagModel.socialUserTagList.map((tag) => (
            <div key={tag.first}>
              <Divider orientation="left">{tag.first}</Divider>
              <TagGroup>
                {tag.tags.map((t) => (
                  <CustomTag
                    onClick={() => socialUserTagModel.setCurrentTag(t)}
                    key={t.id}
                    tagTextColor={t.tagTextColor}
                    color={t.tagBgColor}
                  >
                    {t.tagName} {t.socialUserTotal}
                  </CustomTag>
                ))}
              </TagGroup>
            </div>
          ))}
          <TagDrawl />
        </TagListContainer>
      </Card>
      <TagUpdateModal />
    </PageContainer>
  )
}

export default observer(TagManage)
